<template>
	<div class="login">
		<!-- login区域 -->
		<!-- ref属性 : 获取form表单的所有数据对象		获取某个控件数据对象 : this.$refs.xxxx -->
		<!-- model属性 : 表单数据对象,表单内的控件的v-model所绑定的数据=>data函数 -->
		<el-form ref="form" :model='form' label-width="150px">
			<el-form-item label="账号">
				<el-input v-model="form.username" type="text"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input v-model="form.password" type="password"></el-input>
			</el-form-item>
			<el-button type='primary' @click='toLogin()'>登录</el-button>
		</el-form>
	</div>
</template>

<script>
	// 引入拦截器
	import instance from '../../ajax/index.js';
	
	// 引入请求的封装函数
	// import { $post , $get } from '../../ajax/index.js';
	
	export default{
		name : 'Login',
		data(){
			return {
				// 通过post请求给后端的登录数据
				form : {
					username : '',
					password : '',
					grant_type : 'password',	// 获取token采用密码模式
					client_id : 'sobook4',		// 应用ID
					client_secret : '444444'	// 秘钥
				}
			}
		},
		methods : {
			// 登录函数
			toLogin(){
				// 备份
				let that = this;
				// 将即将post请求的数据,通过qs插件进行格式转换
				let login = this.$qs.stringify( this.form );
				// 发起post请求
				/*http://127.0.0.1:8093/oauth/token
					请求地址:	http://127.0.0.1:8093/oauth/token
					提交的数据:	qs打包成JSON字符串
					配置请求头/表头headers	application/x-www-form-urlencoded
				*/
				instance.post( '/oauth/token' , login , {
					headers : { 'Content-Type' : 'application/x-www-form-urlencoded' }
				} ).then( (res)=>{
					// console.log(res);
					// 将请求成功的token存入本地存储中
					localStorage.setItem( 'token' , res.data.access_token );
					
					instance.get( '/api/info/getUser' ).then( (res)=>{
						// console.log(res);
						// get请求:当前登录者的数据[登录者的角色名nickname:登录账号:role角色]
						localStorage.setItem( 'nickname' , res.data.nickname );
						localStorage.setItem( 'account' , res.data.account );
						// role作用:1.确定登录者登录成功之后跳转到哪个界面;2.确定登录者能够访问的页面权限
						localStorage.setItem( 'role' , res.data.role );
						
						// 跳转:判断role === 买家账号		前台首页:role === 后台管理员，后台首页
						if( res.data.role === 'G' ){
							// 管理员 === 后台
							this.$router.push('/admin');
							return;
						}else{
							// 买家
							this.$router.push('info');
							return;
						}
						
					} ).catch( (error)=>{
						console.log(error);
					} )
					
				} ).catch( (error)=>{
					console.log(error);
				} );
			}
		}
	}
</script>

<style scoped>
	.login{
		width: 600px;
	}
	/* 如果框架内需要修改样式的选择器是通过JS生成的,那么都需要通过穿透才能实现效果 */
	/* 框架内的选择器是组件名或者本身存在的,直接在选择器内修改即可 */
	.login .el-form-item :deep(.el-form-item__label){
		text-align: center;
	}
</style>
